<template>
  <div>
      <el-button type="primary" style="margin:30px;"
      @click="open">添加角色</el-button>
      <el-dialog :visible.sync="roleFlag" width="50%" title="添加角色">
        <el-form label-width="120px" :rules="rules" :model="roleForm" ref="roleForm">
            <el-form-item label="角色名称" prop="name">
              <el-input v-model="roleForm.name"></el-input>
            </el-form-item>
            <el-form-item label="开启">
               <el-switch v-model="roleForm.state"></el-switch>
            </el-form-item >
            <el-form-item label="角色描述" prop="description">
               <el-input type="textarea" v-model="roleForm.description"></el-input>
            </el-form-item>
        </el-form>
          <template #footer>
            <div>
                <el-button type="primary" @click="toAdd">确定</el-button>
                 <el-button @click="roleFlag = false" type="danger">取消</el-button>
            </div>
          </template>
      </el-dialog>
      <!-- ------------------------表格----------------------- -->
      <el-table :data="roleList">
          <el-table-column label="名称" prop="name">
            <template #default="{row}">
              <div>
                <div v-if="!row.isEdit" > {{row.name}}</div>
                <el-input v-if="row.isEdit" v-model="row.name"></el-input>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="启用" prop="state">
            <template #default="{row}">
              <div>
                  <div  v-if="!row.isEdit">{{row.state==1?'启用':'禁用'}}</div>
                  <el-switch v-if="row.isEdit" :active-value="1" 
                  :inactive-value="0"
                  v-model="row.state"></el-switch>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="描述" prop="description">
            <template #default="{row}">
              <div>
                  <div v-if="!row.isEdit" > {{row.description}}</div>
                  <el-input v-if="row.isEdit"  v-model="row.description"></el-input>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="操作">
            <template #default="{row}">
              <div>
                <div v-if="!row.isEdit">
                    <el-link type="primary" @click="toFen(row.id)">分配权限</el-link>
                    <el-link type="primary" style="margin:0 10px;" @click="toEdit(row)">编辑</el-link>
                    <el-popconfirm
                        title="这是一段内容确定删除吗？"
                        @confirm="toDel(row.id)"
                      >
                      
                         <el-link slot="reference" type="primary">删除</el-link>
                   </el-popconfirm>
                  </div>
                  <div v-if="row.isEdit">
                    <el-button type="primary" @click="sureEdit">确定</el-button>
                     <el-button type="danger" @click="close(row)">取消</el-button>
                  </div>
              </div>
            </template>
          

          </el-table-column>
      </el-table>
      <div class="pagination">
        <el-pagination layout="sizes,prev,pager,next" background :total="total"
        :page-size="searchObj.pagesize" 
        :page-sizes="[3, 5, 7,10]"
        :current-page="1"
        @current-change="pageChange"
        @size-change="sizeChange"
        ></el-pagination> 
      </div>
      <!-- 分配权限弹出层 -->
       <el-dialog title="选择权限" :visible.sync="perFlag" width="50%">
          <el-checkbox-group  v-model="checkList">
            <div style="margin-top:10px;" v-for="item in perList" :key="item.id">

              <el-checkbox @change="perChange(item.id)" :value="item.id" v-model="item.checked" :label="item.name"></el-checkbox>
            
              
            </div>
         
        </el-checkbox-group>
        <template #footer>
          <div>
              <el-button type="primary" @click="toAddPer">确定</el-button>
              <el-button type="danger">取消</el-button>
          </div>
        </template>
       </el-dialog>
  </div>
</template>
<script>
import {getRoles,addRole,updateRole,delRole,assignPerm,getRoleDetail} from '@/api/role'
import {PermissionListApi} from '@/api/permission'
export default {
  name: 'roleIndex',

  data() {
    return {
      addPerId:"",//被添加权限的角色id
       checkList:[], //分配的权限id的数组
        perList:[],//权限列表
        permissList:[],//收集id
          perFlag:false,
         editFlag:false,//是否进入编辑状态
         roleFlag:false,
         editRow:{},//当前编辑的行
         roleList:[],//角色列表数据
         searchObj:{ //查询接口参数
            page: 1,
            pagesize:5
         },
         total:0,//数据总条数
        roleForm:{ //添加表单的绑定
          name:"",  //角色名
          description:"", //角色描述
          state:1, //开 1   关0 
        },  
        rules:{ //表单验证规则
          name:[{required:true,message:"角色名称不能为空",trigger:"blur"}],
          description:[{required:true,message:"角色描述不能为空",trigger:"blur"}]
        }
    };
  },
  created(){
      this.getRoleList()
      this.getPerList(); //获取权限列表
  },
  mounted() {
    
  },
 
  methods: { 
    async toFen(id){//点击分配权限
      this.perFlag=true;
      this.addPerId=id//存储了正在分配权限的角色id 
      let res=await getRoleDetail(id) //获取角色详情接口
      console.log(res,"---------回显的数据")
      
      // 根据获取的数据的id [5,6,7]
      // 将perList id对比 加一个checked属性
      this.permissList=res.data.permIds;
      let arr=this.perList.map((item,index)=>{
          if(res.data.permIds.includes(item.id)){
              // item.checked=true;
              this.$set(item,'checked',true)
          }else{
             
              this.$set(item,'checked',false)
          }
          return item
      })


      

    this.perList=arr;
      console.log( this.perList,"------")
      
    },
    perChange(id){
      console.log(this.checkList,"sdfsdfsdfs")
        if( this.permissList.indexOf(id)!=-1){
              this.permissList.splice(this.permissList.indexOf(id),1)
        }else{
          this.permissList.push(id)
        }
    
        console.log(this.permissList,"----")
    },
   async  toAddPer(){ //给角色添加权限接口
        console.log(this.checkList,"----分配的权限id的数组")
        let res=await assignPerm({
          id:this.addPerId,
          permIds:this.permissList
        })
        console.log(res,"-----------------")
        this.perFlag=false;
    },
    async getPerList(){ //获取权限列表
      let res=await PermissionListApi();
      console.log(res,"----权限------")
      this.perList=res.data;
    },
    async toDel(id){//删除接口
        let res=await delRole(id)
        this.getRoleList()
    },
   async  sureEdit(){ //确定编辑
       let res=await updateRole(this.editRow)
       console.log(res,"---------")
       this.getRoleList()
    },
     toEdit(row){ //打开编辑状态
      console.log(row,'-------------')//
       this.editFlag=true;
        this.editRow=row;
       this.$set(row,"isEdit",true) 
    },
    close(row){
        this.$delete(row,"isEdit")
    },
    pageChange(val){ //分页改变事件
      // val--当前页码
      this.searchObj.page=val;
      // 分页改变 重新获取列表
      this.getRoleList()
    },
    sizeChange(pageSize){//pageSize 改变时会触发
        // pageSize--选择pagesize
        this.searchObj.pagesize=pageSize;
       this.getRoleList()
    },
    toAdd(){ //添加角色
        this.roleForm.state=this.roleForm.state?1:0;
        
        // 表单验证方法
        this.$refs.roleForm.validate(async (vali)=>{
          if(vali){ 
              let res=await addRole(this.roleForm);

              this.$refs.roleForm.resetFields(); //重置表单

              this.roleFlag=false;//关闭弹窗

              this.getRoleList(); //重新获取数据
          }
        })
    },
    open(){
      this.roleFlag=true;
    },
   async  getRoleList(){ //获取角色列表接口
      let res=await getRoles(this.searchObj)
      console.log(res,":---------------角色列表")
      this.roleList=res.data.rows;//列表
      this.total=res.data.total;//数据总条数
    }
  },
};
</script>
<style lang="scss">
    .pagination{
      display: flex;
      justify-content: flex-end;
    }
    .el-popconfirm{
      background: white !important;
    }
</style>